import { Bar } from '@ant-design/plots';
import { Card, Radio } from 'antd';
import { useState } from 'react';
import numeral from 'numeral';
type PropField = {
  title: string;
  datas: API.DeptJfData[];
  height: number;
};
const DeptZyFx: React.FC<PropField> = (props) => {
  const [itemType, setItemType] = useState(1);
  const valueField =
    itemType === 1 ? 'ztZyCurrVal' : itemType === 2 ? 'jxedCurrVal' : 'fyedCurrVal';
  const name = itemType === 1 ? '整体' : itemType === 2 ? '绩效' : '费用';
  const data = props.datas.map((item) => {
    return {
      ...item,
      dpnm: item.dpnm.replaceAll('支行', '').replaceAll('小微', '').replaceAll('团队', ''),
    };
  });
  const LeftConfig = {
    data: data,
    xField: 'dpnm',
    yField: valueField,
    sort: {
      reverse: true,
      by: 'y',
    },
    tooltip: {
      name: name,
      channel: 'y',
      valueFormatter: (d: number) => numeral(d).format('0,0'),
    },
  };
  return (
    <Card
      size="small"
      title={props.title}
      extra={
        <Radio.Group
          value={itemType}
          size="small"
          onChange={(e) => setItemType(Number(e.target.value))}
        >
          <Radio.Button key={1} value={1}>
            整体
          </Radio.Button>
          <Radio.Button key={2} value={2}>
            绩效
          </Radio.Button>
          <Radio.Button key={3} value={3}>
            费用
          </Radio.Button>
        </Radio.Group>
      }
      bodyStyle={{ padding: '0px', height: props.height - 60 }}
    >
      <Bar {...LeftConfig} />
    </Card>
  );
};
export default DeptZyFx;
